<template>
  <div class="exchange_wrap">
    <headTop :headClass="'transparent_header'">Cash exchange</headTop>
    <div class="head_wrap">
      <div class="head_nav">
        <span :class="{'active': activeNum === 0}" @click="tabActive(0)">Convertibility</span>
        <!-- <span :class="{'active': activeNum === 1}" @click="tabActive(1)">exchangeYTCC</span> -->
      </div>
    </div>
    <div class="exchange_return" v-if="activeNum === 0">
      <div class="turn_out">
        <div class="turn_out_title">
          <span>Exchange rate</span>
        </div>
        <label class="input_wrap">
          <input type="number" v-model="money" @input="clearNum">
          <span class="min_exchange" v-if="!money"><span>100</span>Rise and fall</span>
        </label>
        <div class="exchange">
          <span class="left">My Now point :  {{RMB}} CNY</span>
        </div>
      </div>
      <div class="return_money">
        <span>Get the back point ( {{cash}}:{{point}} )</span>
        <span class="return">{{returnPoint}}</span>
      </div>
    </div>
    <div class="exchange_ytcc" v-if="activeNum === 1">
      <div class="turn_out">
        <div class="turn_out_title">
          <span>Exchange rate</span>
        </div>
        <label class="input_wrap">
          <input type="number" v-model="money1" @input="clearNum">
          <span class="min_exchange" v-if="!money1"><span>100</span>Rise and fall</span>
        </label>
        <div class="exchange">
          <span class="left">My Now point :  {{RMB}} CNY</span>
        </div>
      </div>
      <div class="return_money">
        <span>obtainYTCC</span>
        <span class="return">{{ytcc}}</span>
      </div>
    </div>
    <div class="submit">
      <span class="public_btn" @click="submit">Confirmation of exchange</span>
    </div>
    <div class="view_record">
      <span class="public_btn" @click="viewRecord">Record of exchange</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'exchange',
  data () {
    return {
      money: '',
      RMB: '',
      cash: 1,
      point: null,
      activeNum: 0,
      money1: '',
      ytccProp: ''
    };
  },
  beforeMount () {
    this.getBalance();
    this.getProportion();
    this.getPropytcc();
  },
  computed: {
    returnPoint () {
      if (this.money) {
        return ((parseFloat(this.money) * this.point) / this.cash).toFixed(2);
      } else {
        return '0.00';
      }
    },
    ytcc () {
      if (this.money1) {
        return ((parseFloat(this.money1) * this.ytccProp)).toFixed(2);
      } else {
        return '0.00';
      }
    },
    passWord () {
      return this.$store.state.modal.password;
    }
  },
  methods: {
    // Switch navigation
    tabActive (num) {
      this.activeNum = num;
    },
    // Clear the two decimal places.
    clearNum () {
      if (/\./g.test(this.money) && this.money.toString().split('.')[1].length > 2) {
        this.money = this.money.substr(0, this.money.length - 1);
      }
      if (/\./g.test(this.money1) && this.money1.toString().split('.')[1].length > 2) {
        this.money1 = this.money1.substr(0, this.money1.length - 1);
      }
    },
    // View the record
    viewRecord () {
      if (this.activeNum === 0) {
        this.$router.push('exchangeRecord');
      } else {
        this.$router.push('ytccRecord');
      }
    },
    // Check out
    submit () {
      if (this.activeNum === 0) {
        if (!this.money) {
          this.Toast('Please enter the amount of exchange.');
        } else if (parseFloat(this.money) <= 0) {
          this.Toast('The amount of exchange is not legal.');
        } else if (parseFloat(this.money) < 100) {
          this.Toast('Please enter greater than100Exchange amount');
        } else if (parseFloat(this.money) > parseFloat(this.RMB)) {
          this.Toast('Lack of Now point');
        } else {
          this.isSetPwd();
        }
      } else {
        if (!this.money1) {
          this.Toast('Please enter the amount of exchange.');
        } else if (parseFloat(this.money1) <= 0) {
          this.Toast('The amount of exchange is not legal.');
        } else if (parseFloat(this.money1) < 100) {
          this.Toast('Please enter greater than100Exchange amount');
        } else if (parseFloat(this.money1) > parseFloat(this.RMB)) {
          this.Toast('Lack of Now point');
        } else {
          this.isSetPwd();
        }
      }
    },
    // Convertibility submission
    confirm () {
      this.ShowPassword(() => {
        this.axios.get('index/transfer/exchange', {
          params: {
            present: this.money,
            pay_password: this.passWord
          }
        }).then(({data}) => {
          if (data.status === 200) {
            this.Toast('Exchange success');
            this.$router.push('exchangeRecord');
          } else {
            this.Toast(data.message);
          }
        });
      });
    },
    // Determining whether to set payment password
    isSetPwd () {
      this.axios.get('index/users/pay_pass').then(({data}) => {
        if (data.status === 200) {
          if (this.activeNum === 0) {
            this.confirm();
          } else {
            this.exchange();
          }
        } else {
          this.Modal('Set transaction password', 'It is necessary to set up the transaction password before making the cash exchange., Please set up immediately.', ['cancel', 'To set up'], () => {
            this.$router.push('setPassword');
          });
        }
      });
    },
    // Getting convertibility
    getProportion () {
      this.axios.get('index/transfer/exchange_bili').then(({data}) => {
        if (data.status === 200) {
          this.point = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Gain the balance
    getBalance () {
      this.axios.post('index/users/userinfo').then(({data}) => {
        if (data.status === 200) {
          this.RMB = data.data.present_point;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Obtainytccsubscription ratio
    getPropytcc () {
      this.axios.get('index/transfer/xxm_bili').then(({data}) => {
        if (data.status === 200) {
          this.ytccProp = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // exchangeytcc
    exchange () {
      this.ShowPassword(() => {
        this.axios.get('index/transfer/xxm', {
          params: {
            money: this.money1,
            pay_password: this.passWord
          }
        }).then(({data}) => {
          if (data.code === 200) {
            this.Toast('Exchange success');
            this.$router.push('ytccRecord');
          } else {
            this.Toast(data.message);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .exchange_wrap{
    background-color: #f5f5f5;
    .head_wrap{
      width: 100%;
      height: 200px;
      background: url('./../image/pic2_02.png') no-repeat;
      padding-top: 132px;
      .head_nav{
        display: flex;
        justify-content: center;
        font-size: 28px;
        // color: #555;
        .active{
          color: #222;
        }
      }
    }
    .turn_out{
      width: 100%;
      background-color: #fff;
      padding: 0 32px;
      margin-bottom: 20px;
      .turn_out_title{
        width: 100%;
        height: 86px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28px;
        color: #999;
      }
      .input_wrap{
        display: block;
        width: 100%;
        height: 106px;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
        input{
          font-size: 60px;
          color: #282828;
          padding-left: 42px;
          width: 100%;
          height: 100%;
          &::placeholder{
            font-size: 30px;
            color: #999;
          }
        }
        .min_exchange{
          font-size: 30px;
          color: #999;
          position: absolute;
          left: 42px;
          top: 20px;
          >span{
            font-size: 52px;
            color: #999;
          }
        }
        &::before{
          display: block;
          content: '';
          width: 2px;
          height: 50px;
          background-color: #999;
          position: absolute;
          bottom: 30px;
          left: 10px;
        }
      }
      .exchange{
        width: 100%;
        height: 106px;
        line-height: 106px;
        .left{
          font-size: 28px;
          color: #666;
        }
      }
    }
    .return_money{
      width: 100%;
      height: 108px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      padding: 0 28px;
      font-size: 28px;
      color: #282828;
      margin-bottom: 80px;
    }
    .submit, .view_record{
      width: 100%;
      text-align: center;
    }
    .submit{
      margin-bottom: 40px;
    }
    .view_record{
      .public_btn{
        background: transparent;
        border: 1px solid #666;
        color: #999;
      }
    }
  }
</style>
